<template>
    <div class="app-container">
      <el-card class="box-card">
        <!-- <el-button type="primary" @click="handleAdd">添加</el-button> -->
		<!-- <el-button type="primary" @click="openingTimeDialog">开启时间</el-button> -->
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          border
          class="mt-3"
          stripe
          style="width: 100%"
          tooltip-effect="dark"
        >
          <!-- <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="80px"></el-table-column> -->
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="兑换余额所需金币" prop="balance_coin"></el-table-column>
          <el-table-column label="新手次数" prop="novice_count"></el-table-column>
          <el-table-column label="新手头奖金币" prop="novice_jackpot_coin"></el-table-column>
          <el-table-column label="单抽头奖金币" prop="single_jackpot_coin"></el-table-column>
          <el-table-column label="默认补偿范围" prop="recoup_range"></el-table-column>
          <el-table-column label="新手补偿范围" prop="novice_recoup_range"></el-table-column>
          <el-table-column label="奖池亏损头奖金币" prop="loss_jackpot_coin"></el-table-column>
		  <el-table-column label="触发默认补偿最小投产比" prop="triggered_recoup_io_rate"></el-table-column>
          <el-table-column label="触发新手补偿最小投产比" prop="triggered_novice_recoup_io_rate"></el-table-column>


		  <el-table-column label="触发补偿最小次数" prop="triggered_recoup_min_count"></el-table-column>
		  <el-table-column label="触发补偿最小金额" prop="triggered_recoup_min_loss"></el-table-column>
		  <el-table-column label="通知金币" prop="notify_coin"></el-table-column>
		  <el-table-column label="广播金币" prop="broadcast_coin"></el-table-column>
		  <el-table-column label="限制奖品价格" prop="restrict_prize_coin"></el-table-column>
		  <el-table-column label="奖池投入比" prop="pool_input_rate"></el-table-column>
		  <el-table-column label="每日新手次数" prop="date_novice_jackpot_coin"></el-table-column>
		  <el-table-column label="大奖金额通知" prop="grand_prize_amount"></el-table-column>

          <el-table-column label="是否开启" prop="is_open">
			<template slot-scope="{row}">
              <el-tag v-if="row.is_open === 1" type="success" size="normal"  effect="dark">开启</el-tag>
			  <el-tag v-else type="warning" size="normal"  effect="dark">关闭</el-tag>
            </template>
		  </el-table-column>
		  <el-table-column label="活动开始时间" prop="start_at"></el-table-column>
          <el-table-column label="活动结束时间" prop="end_at"></el-table-column>
          
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleEditOrAdd(scope)"
              >编辑
              </el-button>
              
              <!-- <el-button
                size="mini"
                type="text"
                @click="handleStatus(scope.$index)"
              >删除
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <!-- <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getTableData"
        /> -->
    </el-card>

	<el-dialog
		title="活动时间"
		:visible.sync="dialogVisible"
		width="30%"
		@close="closeDialog">
		<el-form :model="formData" ref="form" :rules="rules" label-width="180px" :inline="false" size="normal">
			<el-form-item label="兑换余额所需金币" prop="balance_coin">
				<el-input placeholder="兑换余额所需金币" v-model="formData.balance_coin"></el-input>
			</el-form-item>
			<el-form-item label="新手次数" prop="novice_count">
				<el-input placeholder="新手次数" v-model="formData.novice_count"></el-input>
			</el-form-item>
			<el-form-item label="新手头奖金币" prop="novice_jackpot_coin">
				<el-input placeholder="新手头奖金币" v-model="formData.novice_jackpot_coin"></el-input>
			</el-form-item>
			<el-form-item label="单抽头奖金币" prop="single_jackpot_coin">
				<el-input placeholder="单抽头奖金币" v-model="formData.single_jackpot_coin"></el-input>
			</el-form-item>
			<el-form-item label="默认补偿范围" prop="recoup_range">
				<el-input placeholder="默认补偿范围" v-model="formData.recoup_range"></el-input>
			</el-form-item>
			<el-form-item label="新手补偿范围" prop="novice_recoup_range">
				<el-input placeholder="新手补偿范围" v-model="formData.novice_recoup_range"></el-input>
			</el-form-item>
			<el-form-item label="奖池亏损头奖金币" prop="loss_jackpot_coin">
				<el-input placeholder="奖池亏损头奖金币" v-model="formData.loss_jackpot_coin"></el-input>
			</el-form-item>
			<el-form-item label="触发默认补偿最小投产比" prop="triggered_recoup_io_rate">
				<el-input placeholder="触发默认补偿最小投产比" v-model="formData.triggered_recoup_io_rate"></el-input>
			</el-form-item>
			<el-form-item label="触发新手补偿最小投产比" prop="triggered_novice_recoup_io_rate">
				<el-input placeholder="触发新手补偿最小投产比" v-model="formData.triggered_novice_recoup_io_rate"></el-input>
			</el-form-item>

			<el-form-item label="触发补偿最小次数" prop="triggered_recoup_min_count">
				<el-input placeholder="触发补偿最小次数" v-model="formData.triggered_recoup_min_count"></el-input>
			</el-form-item>
			<el-form-item label="触发补偿最小金额" prop="triggered_recoup_min_loss">
				<el-input placeholder="触发补偿最小金额" v-model="formData.triggered_recoup_min_loss"></el-input>
			</el-form-item>
			<el-form-item label="通知金币" prop="notify_coin">
				<el-input placeholder="通知金币" v-model="formData.notify_coin"></el-input>
			</el-form-item>
			<el-form-item label="广播金币" prop="broadcast_coin">
				<el-input placeholder="广播金币" v-model="formData.broadcast_coin"></el-input>
			</el-form-item>
			<el-form-item label="限制奖品价格" prop="restrict_prize_coin">
				<el-input placeholder="限制奖品价格" v-model="formData.restrict_prize_coin"></el-input>
			</el-form-item>
			<el-form-item label="奖池投入比" prop="pool_input_rate">
				<el-input placeholder="奖池投入比" v-model="formData.pool_input_rate"></el-input>
			</el-form-item>
			<el-form-item label="每日新手次数" prop="date_novice_jackpot_coin">
				<el-input placeholder="每日新手次数" v-model="formData.date_novice_jackpot_coin"></el-input>
			</el-form-item>
			<el-form-item label="大奖金额通知" prop="grand_prize_amount">
				<el-input placeholder="大奖金额通知" v-model="formData.grand_prize_amount"></el-input>
			</el-form-item>

			<el-form-item label="是否开启" prop="is_open">
				<el-radio-group v-model="formData.is_open">
					<el-radio :label="1">开启</el-radio>
					<el-radio :label="2">关闭</el-radio>
				</el-radio-group>
				
			</el-form-item>
			<el-form-item label="活动开始时间" prop="start_at">
				<el-date-picker
					v-model="formData.start_at"
					type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss"
					placeholder="请选择开始时间"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="活动结束时间" prop="end_at">
				<el-date-picker
					v-model="formData.end_at"
					type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss"
					placeholder="请选择开始时间"
				></el-date-picker>
			</el-form-item>
		</el-form>
		
		<span slot="footer">
			<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="onSubmit">确定</el-button>
		</span>
	  </el-dialog>
	  
  
    </div>
</template>
  
<script>
    import { lottery3SettingList, lottery3Setting } from '@/api/guardActivity'
  
  	export default {
        name: 'setting',
        components: {},
        data() {
        return {
			dialogVisible: false,
			formData: {
				id: undefined,
				balance_coin: undefined,
				novice_count: undefined,
				novice_jackpot_coin: undefined,
				single_jackpot_coin: undefined,
				recoup_range: undefined,
				novice_recoup_range: undefined,
				loss_jackpot_coin: undefined,
				triggered_recoup_io_rate: undefined,
				triggered_novice_recoup_io_rate: undefined,
				triggered_recoup_min_count: undefined,
				triggered_recoup_min_loss: undefined,
				notify_coin: undefined,
				broadcast_coin: undefined,
				restrict_prize_coin: undefined,
				pool_input_rate: undefined,
				is_open: 1,
				date_novice_count_condition: undefined,
				date_novice_jackpot_coin: undefined,
				grand_prize_amount: undefined,
				start_at: undefined,
				end_at: undefined,
			},
			rules: {
				start_at: [{ required: true, message: '请选择活动开始时就按', trigger: 'blur' }],
				end_at: [{ required: true, message: '请选择活动结束时间', trigger: 'blur' }],
				balance_coin: [{ required: true, message: '请输入兑换余额所需金币', trigger: 'blur' }],
				novice_input: [{ required: true, message: '请输入新手投入金币', trigger: 'blur' }],
				profit_loss_rate: [{ required: true, message: '请输入盈亏率', trigger: 'blur' }],
				notify_coin: [{ required: true, message: '请输入通知金币', trigger: 'blur' }],
				broadcast_coin: [{ required: true, message: '请输入广播金币', trigger: 'blur' }],
				crit_coin_rate: [{ required: true, message: '请输入暴击金币百分比', trigger: 'blur' }],
			},
            title: '',
            loading: false,
            tableData: [],
            listQuery: {
				page: 1,
				perPage: 10
            },
            total: 1,
			pool_id: undefined,
			index: undefined
        }
    },
    created() {
        this.getTableData()
    },
    methods: {
		indexMethod(index) {
			return this.tableData.length - index
		},
        handleInput(val,key) {
			// val.toString().match(/^\d+(?:\.\d{0,3})?/)
			console.log(val.toString())
			val = val.replace(/\.{2,}/g,".");//一个小数点
			val = val.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
			val = val.replace(/^(\-)*(\d+)\.(\d{0,6}).*$/,'$1$2.$3');//小数点后6位
			this.formData[key] = val
        },
        // 网络请求
        /**
         * getTableData
         * @desc 获取表格数据
         */
        async getTableData() {
            this.loading = true
            for (let key in this.listQuery) {
                this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
            }
            const {code,data} = await lottery3SettingList(this.listQuery)
            if (code === 200) {
				
				this.tableData = [data]
            }
            this.loading = false
    
        },
        closeDialog(form) {
            if (this.$refs[form]) {
                // this.formData.status = undefined
                this.$refs[form].clearValidate() // 清除整个表单的校验
                this.$refs[form].resetFields() // 清除整个表单的校验
            }
			this.formData = {
				id: undefined,
				balance_coin: undefined,
				novice_count: undefined,
				novice_jackpot_coin: undefined,
				single_jackpot_coin: undefined,
				recoup_range: undefined,
				novice_recoup_range: undefined,
				loss_jackpot_coin: undefined,
				triggered_recoup_io_rate: undefined,
				triggered_novice_recoup_io_rate: undefined,
				triggered_recoup_min_count: undefined,
				triggered_recoup_min_loss: undefined,
				notify_coin: undefined,
				broadcast_coin: undefined,
				restrict_prize_coin: undefined,
				pool_input_rate: undefined,
				is_open: 1,
				date_novice_count_condition: undefined,
				date_novice_jackpot_coin: undefined,
				grand_prize_amount: undefined,
				start_at: undefined,
				end_at: undefined,
			}
        },
        handleAdd() {
          this.dialogVisible = true
        },
        handleEditOrAdd(scope) {
			this.formData = JSON.parse(JSON.stringify(scope.row))
			this.formData.id = this.formData.id || undefined
			this.dialogVisible = true
        },
		onSubmit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
					
					for (let key in this.formData) {
						this.formData[key] = this.formData[key] === '' || this.formData[key] === undefined ? 0 : this.formData[key]
					}
					lottery3Setting(this.formData).then(res => {
						if(res.code === 200) {
							this.$message({
								type: 'success',
								message: '操作成功'
							})
							this.dialogVisible = false
							this.getTableData()
						}
					})
                }
            })
        },
        
		openingTimeDialog() {
			this.dialogVisible = true
		},
		handleOpeningTime() {},
    }
  }
</script>
  
<style lang="scss" scoped>
.infoBox {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border: 1px solid #999999;
  border-radius: 10px;

  .info_1{
    display: flex;
    align-items: center;

    width: 100%;

    .info_2{
      margin-top: 15px;
      display: flex;
      align-items: center;
	  position: relative;

      span{
        width: 180px;
        text-align: right;
      }
	  .tip{
			color: red;
			font-size: 12px;
			position: absolute;
			top: 100%;
			left: 120px;
		}
    }
  }
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
}

</style>
  